<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<pre>

			MVVM、MVC、MV*

      MVVM：是一种设计思想，是一种分层思想

        M => model 模型   数据模型
        V => view  视图   页面结构
  
        VM => view-model  事件监听以及数据绑定的功能

        双向数据绑定，当在输入框输入内容，能够同步到数据模型data，这是因为vue底层做了数据监听的操作，
        数据模型data数据能够同步到视图层，底层做了数据绑定的操作

    </pre>

		<div id="box">
			<span>姓名：{{ name }}</span><br />
			<input type="text" v-model="name" /><br />
			<span>年龄：{{ age }}</span><br />
			<input type="text" v-model="age" /><br />
			<span>性别：{{ sex }}</span><br />
			<input type="text" v-model="sex" /><br />
		</div>

		<script src="/scripts/vue.js"></script>

		<script>
			var vm = new Vue({
				el: '#box',
				data: {
					name: 'zs',
					age: '20',
					sex: 'male',
				},
			})
		</script>
	</body>
</html>
